<template>
    <div id="childrenBoxId">
        <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh">
           
        </van-pull-refresh> -->
        <!-- <PlayGround v-if="active === 0"></PlayGround> -->
        <MainPage v-if="active === 0"></MainPage>
        <Friend v-else-if="active === 1"></Friend>
        <Center v-else></Center>
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item badge="3" icon="fire-o">main</van-tabbar-item>
            <van-tabbar-item icon="friends-o">friend</van-tabbar-item>
            <van-tabbar-item icon="setting-o">center</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
// import { showToast } from "vant"
// import PlayGround from "@/page/playGround/index.vue"
import MainPage from "@/page/main/index.vue"
import Friend from "@/page/friend/index.vue"
import Center from "@/page/center/index.vue"

const active = ref(0)
const onChange = (value: number) => {
    console.log(value)
    active.value = value
}

// const loading = ref(false)
// const onRefresh = () => {
//     setTimeout(() => {
//         showToast("刷新成功")
//         loading.value = false
//         // count.value++
//     }, 1000)
// }
</script>
<style lang="less" scoped>
#childrenBoxId {
    max-height: 100vh;
    overflow: hidden;
    .van-pull-refresh {
        height: 100vh;
    }
}
</style>
